import React from 'react';

const UserPage: React.FC = () => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">用户管理</h1>
      <div className="mb-4">
        <button className="bg-blue-500 text-white px-4 py-2 rounded mr-2">添加用户</button>
        <button className="bg-gray-200 px-4 py-2 rounded">导出</button>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full bg-white">
          <thead className="bg-gray-100">
            <tr>
              <th className="py-2 px-4 text-left">ID</th>
              <th className="py-2 px-4 text-left">用户名</th>
              <th className="py-2 px-4 text-left">邮箱</th>
              <th className="py-2 px-4 text-left">角色</th>
              <th className="py-2 px-4 text-left">状态</th>
              <th className="py-2 px-4 text-left">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t">
              <td className="py-2 px-4">1</td>
              <td className="py-2 px-4">admin</td>
              <td className="py-2 px-4">admin@example.com</td>
              <td className="py-2 px-4">管理员</td>
              <td className="py-2 px-4"><span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">活跃</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">编辑</button>
                <button className="text-red-500">删除</button>
              </td>
            </tr>
            <tr className="border-t">
              <td className="py-2 px-4">2</td>
              <td className="py-2 px-4">user1</td>
              <td className="py-2 px-4">user1@example.com</td>
              <td className="py-2 px-4">普通用户</td>
              <td className="py-2 px-4"><span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">活跃</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">编辑</button>
                <button className="text-red-500">删除</button>
              </td>
            </tr>
            <tr className="border-t">
              <td className="py-2 px-4">3</td>
              <td className="py-2 px-4">user2</td>
              <td className="py-2 px-4">user2@example.com</td>
              <td className="py-2 px-4">普通用户</td>
              <td className="py-2 px-4"><span className="bg-gray-100 text-gray-800 px-2 py-1 rounded-full text-xs">禁用</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">编辑</button>
                <button className="text-red-500">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default UserPage; 